<template>
  <div class="box">
    <div class="topbox">
      <span @click="currentIndex=index" v-for="(item,index) in arr" :key="index" :class="{active:currentIndex==index}">{{item}}</span>
    </div>
    <div class="shopp" v-for="(item,index) in list1" :key="index">
      <div class="leftbox">
        <img :src="item.picture" alt="">
      </div>
      <div class="rightbox">
        <div class="name">{{item.name}}</div>
        <div class="num">
          <div>￥{{item.min_price}}元</div>
          <div @click="change(item)" class="btn">{{item.status==0?'马上抢':'已抢'}}</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { tuan_list } from '../../utils/api'
export default {
  data() {
    return {
      currentIndex: 0,
      list1: [],
      arr: ['正在抢购', '上新预告']
    }
  },
  mounted() {
    tuan_list({ status: this.currentIndex }).then((res) => {
      this.list1 = res.data.list;
      console.log(this.list1);
    })
  },
  updated() {
    tuan_list({ status: this.currentIndex }).then((res) => {
      this.list1 = res.data.list;
      // console.log(this.list1);
    })
    // console.log(this.currentIndex);
  },
  methods:{
    change(item) {
      item.status =1;
    }
  }
}
</script>

<style lang="scss" scoped>
.topbox{
  width: 100%;
  height: 180px;
  background-clip: red;
  background-image: linear-gradient(to top,rgb(230, 31, 31),rgb(88, 45, 45),rgb(209, 117, 51));
}
.topbox span{
  display: inline-block;
  margin: 140px 4px;
  color: rgb(187, 174, 174);
}
.topbox .active{
  border-bottom: 1px solid red;
  color: rgb(252, 250, 250);
}
.shopp {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 4px 2.5%;
}

.shopp .leftbox {
  width: 80px;
  height: 80px;
}

.shopp .leftbox img {
  width: 100%;
}

.shopp .rightbox .num {
  display: flex;
  justify-content: space-between;
}

.shopp .rightbox {
  text-align: left;
  width: 253px;
}
.num .btn{
  background-color: red;
  color: white;
  padding: 2px 4px;
  text-align: center;
  border-radius: 3px;
}
</style>